<script setup lang="ts">
import { getWaitOrderList, SjWareDocVo } from '@/api/wuliu';
import AreaSelector from '@/components/AreaSelector/AreaSelector.vue';
import OrderMx from '@/components/OrderMx/OrderMx.vue';
import { Refresh, Search } from '@element-plus/icons-vue';

const loading = ref(false);
const listQuery = reactive({ deptId: undefined });
const listData = ref<SjWareDocVo[]>([]);

async function getOrderData() {
  try {
    loading.value = true;
    const { deptId } = listQuery;

    const list = await getWaitOrderList(deptId);
    listData.value = list;
    console.log('dai pai che order list', list);
  } catch (error) {
    console.error('Error get area order list', error);
  } finally {
    loading.value = false;
  }
}
watch(listQuery, getOrderData, { immediate: true });

const detailData = ref<SjWareDocVo>();
const detailVisible = ref(false);
const orderMxRef = ref<InstanceType<typeof OrderMx>>();

async function openDetail(item: SjWareDocVo) {
  console.log('Detail', item);
  detailData.value = item;
  detailVisible.value = true;
}

function openMx(item: any) {
  console.log('Mx', item.wareDocMxVoList);
  orderMxRef.value?.handleOpen(item.wareDocMxVoList);
}
</script>

<template>
  <div class="app-container dai-pai-che">
    <div class="header">
      <div class="header-filter">
        <el-form ref="queryFormRef" :model="listQuery" :inline="true">
          <el-form-item label="所属区域" prop="userName">
            <AreaSelector v-model="listQuery.deptId" />
          </el-form-item>
        </el-form>
      </div>

      <div class="header-actions">
        <el-tooltip content="刷新">
          <el-button :icon="Refresh" circle @click="getOrderData" />
        </el-tooltip>
      </div>
    </div>

    <el-table v-loading="loading" :data="listData" stripe>
      <el-table-column label="所属区域" prop="deptName" />
      <el-table-column label="总件数" prop="wareSum">
        <template #default="{ row }"> {{ row.wareSum }}件 </template>
      </el-table-column>
      <el-table-column label="共计运费">
        <template #default="{ row }"> ￥{{ row.warePriceSum }} </template>
      </el-table-column>
      <el-table-column label="报单时间" prop="wareCreateTime" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button :icon="Search" type="primary" size="small" text @click="openDetail(row)"> 查看 </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer v-model="detailVisible" title="订单信息" direction="rtl" size="60%">
      <el-table :data="detailData.warelist">
        <el-table-column prop="postName" label="报单公司" />
        <el-table-column prop="bdrmc" label="报单人" />
        <el-table-column label="件数" prop="articleSum">
          <template #default="{ row }"> {{ row.articleSum }}件 </template>
        </el-table-column>
        <el-table-column prop="priceSum" label="总运费">
          <template #default="{ row }"> ￥{{ row.priceSum }} </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button :icon="Search" type="primary" size="small" text @click="openMx(row)"> 查看 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>

    <OrderMx ref="orderMxRef" />
  </div>
</template>

<style lang="scss">
.dai-pai-che {
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .header-filter {
      flex: 1 0 0;
    }

    .header-actions {
      flex: 0 0 auto;
    }
  }
}
</style>
